<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>注册</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet">
    <link href="<@spring.url "/resources/css/bootstrap.min.css"/>" rel="stylesheet">
    <link href="<@spring.url "/resources/css/nifty.min.css"/>" rel="stylesheet">
    <link href="<@spring.url "/resources/premium/icon-sets/icons/line-icons/premium-line-icons.min.css"/>" rel="stylesheet">
    <link href="<@spring.url "/resources/premium/icon-sets/icons/solid-icons/premium-solid-icons.min.css"/>" rel="stylesheet">
    <script src="<@spring.url "/resources/js/jquery.min.js"/>"></script>
    <script src="<@spring.url "/resources/js/bootstrap.min.js"/>"></script>
    <script src="<@spring.url "/resources/js/pace.min.js"/>"></script>
    <script src="<@spring.url "/resources/js/common.js"/>"></script>
</head>
<body>
<div id="container" class="cls-container">
    <div class="cls-content" id="signupOne">
        <div class="cls-content-sm panel">
            <div class="panel-body">
                <div class="mar-ver pad-btm">
                    <h1 class="h3">用户注册</h1>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="passport" id="passport" placeholder="输入您的手机号码" autofocus>
                    <span class="help-block" name="passportnull" id="passportnull" style="color: red;"></span>
                </div>

                <button class="btn btn-primary btn-lg btn-block" id="secCodeBtn" type="button">点击获取验证码</button>
                <br/>
                <div class="form-group">
                    <input type="text" class="form-control" name="secCode" id="secCode" placeholder="输入匹配的验证码">
                    <span class="help-block" name="secCodeError" id="secCodeError" style="color: red;"></span>
                </div>
                <button class="btn btn-primary btn-lg btn-block" id="nextBtn" type="button">下一步</button>
                <br/>
                <div>
                    <input type="text" class="form-control" name="saler" id="saler" placeholder="销售姓名/电话">
                </div>
            </div>
        </div>
    </div>

    <div class="cls-content" id="signupTwo" style="display:none">
        <div class="cls-content-sm panel">
            <div class="panel-body">
                <div class="mar-ver pad-btm">
                    <h1 class="h3">用户注册</h1>
                </div>
                <div class="form-group">
                    <p name="passportpwd" id="passportpwd"></p>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="pwdSet" id="pwdSet" placeholder="输入密码" autofocus>
                    <span onclick="showPwd()" id="m_span">明文</span>
                    <span onclick="closePwd()" id="ms_span" style="display: none">密文</span>
                    <span id="pwdTip1" style="color: red;">密码必须由6-12位密码加数字组成</span>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="pwdCheck" id="pwdCheck" placeholder="确认密码">
                    <span id="pwdTip2" style="color: red;"></span>
                </div>
                <button class="btn btn-primary btn-lg btn-block" id="nextBtnPwd" type="button">下一步</button>

            </div>
        </div>
    </div>

    <div class="cls-content" id="signupThree" style="display:none">
        <div class="cls-content-sm panel">
            <div class="panel-body">
                <div class="mar-ver pad-btm">
                    <h1 class="h3">注册成功</h1>
                </div>
                <div>
                    <p name="sucInfo">恭喜您，<span name="passportsuc" id="passportsuc"></span>客户，您已经注册成功</p>
                    <p id="entSignHL">请尽快完成企业注册</p>
                </div>
                <br/>
                <button class="btn btn-primary btn-lg btn-block" onclick="window.location.href='<@spring.url "/index" />'" id="entSign" type="button">企业认证</button>
                <br/>
                <button class="btn btn-primary btn-lg btn-block" onclick="window.location.href='<@spring.url "/index" />'" id="indexPage" type="button">我的主页</button>

            </div>
        </div>
    </div>

</div>
<script>
    $(function(){
        //获取验证码
        $("#secCodeBtn").click(function(){
           var passport = $("#passport").val();
           var count = 60;
           if(passport.length == 0){
               $("#passportnull").html("手机号不能为空");
               $("#passportnull").show();
               $("#passport").focus();
           }else if(!(/^1[34578]\d{9}$/).test($.trim(passport))){
               $("#passportnull").html("请输入正确手机号");
               $("#passportnull").show();
           }else{
               $("#passportnull").html("");
               $("#passportnull").hide();

               $.post("<@spring.url "/sendMessage"/>",
                       {phone:passport},
                       function (data) {
                   if (data.code == 1) {
                       $("#passport").attr("disabled","disabled");
                       $("#secCodeBtn").attr("disabled","disabled");
                       $("#secCodeBtn").html("重新获取验证码：" + count + "秒");
                       var timer = setInterval(function () {
                           count--;
                           $("#secCodeBtn").html("重新获取验证码：" + count + "秒");
                           if (count == 0) {
                               $("#secCodeBtn").removeAttr("disabled");
                               $("#secCodeBtn").html("重新获取验证码");
                               $("#passport").removeAttr("disabled");
                               clearInterval(timer);
                           }
                       },1000);
                   } else {
                       alert(data.message);
                   }
               });
           }
        });

        //验证验证码
        $("#nextBtn").click(function(){
            $("#passportnull").hide();
            $("#secCodeError").hide();
            var passport = $("#passport").val();
            var secCode = $("#secCode").val();
            if ($.trim(passport)=="") {
                $("#passportnull").html("手机号不能为空");
                $("#passportnull").show();
                $("#passport").focus();
                return false;
            }
            if (!(/^1[34578]\d{9}$/).test($.trim(passport))) {
                $("#passportnull").html("请输入正确手机号");
                $("#passportnull").show();
                return false;
            }
            if ($.trim(secCode)=="") {
                $("#secCodeError").html("请输入验证码");
                $("#secCodeError").show();
                $("#secCode").focus();
                return false;
            }
            $.post("<@spring.url "/checkCode"/>",
                    {phone:passport, secCode:secCode},
                    function (data) {
                        if (data.code == 1) {
                            $("#signupTwo").show();
                            $("#signupOne").hide();
                            $("#passportpwd").html(passport);
                        } else {
                            alert(data.message);
                        }
                    });

        });

        //检查两次密码是否一致
        $("#pwdCheck").blur(function(){
            var pas1=$("#pwdSet").val();
            var pas2=$("#pwdCheck").val();
            if(pas1!=pas2&&pas2!="")
                $("#pwdTip2").html("两次输入的密码不一致");
            else
                $("#pwdTip2").html("");
        });

        //完成注册
        $("#nextBtnPwd").click(function(){
            var passport = $("#passportpwd").html();
            var password = "";
            var reg = /^[A-Za-z0-9]{6,16}$/;
            if(reg.test($("#pwdSet").val())){
                $("#pwdTip1").hide();
            }else{
                $("#pwdTip1").show();
            }
            var pas1=$("#pwdSet").val();
            var pas2=$("#pwdCheck").val();
            if(pas1!=pas2&&pas2!=""){
                $("#pwdTip2").html("两次输入的密码不一致");
                password = "";
            } else{
                $("#pwdTip2").html("");
                password = $("#pwdSet").val();
            }
            var saler = $("#saler").val();
            $.post("<@spring.url "/signsuc"/>",{
                phone:passport, password:password, saler:saler
            },function(data){
                if(data.code==1){
                    $("#signupTwo").hide();
                    $("#signupThree").show();
                    $("#passportsuc").html(passportpwd);
                }else{
                    alert(data.message);
                }
            });

        });
    })

    function showPwd(){
        $("#pwdSet").attr("type", "text");
        $("#m_span").hide();
        $("#ms_span").show();
    }

    function closePwd() {
        $("#pwdSet").attr("type", "password");
        $("#m_span").show();
        $("#ms_span").hide();
    }
</script>
</body>
</html>
